{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}
<div class="page-header">
    <h1>添加照片</h1>
</div>

<ol class="breadcrumb" id="navigation">
    <li><a href="{{ url_for('.index') }}">翻相册</a></li>
    <li><a href="{{ url_for('.albums', username=album.author.username) }}">{% if current_user == album.author %}我{% else %}{{ album.author.name }}{% endif %}的相册</a></li>
    <li><a href="{{ url_for('.album', id=album.id) }}">《{{ album.title }}》</a></li>
    <li class="active">添加照片</li>
    <li class="pull-right"><a href="{{ url_for('.album', id=album.id) }}">返回相册</a></li>
</ol>
<div class="col-md-12">
  {{ dropzone.load_css() }}
  {{ dropzone.style('border: 2px dashed #0087F7; margin: 10%; min-height: 400px;') }}
  {{ dropzone.create(action=url_for('main.add_photo', id=album.id)) }}
  <button class="btn-success btn-xm" id="upload-btn">UPLOAD</button>
  {{ dropzone.load_js() }}
  {{ dropzone.config(custom_init='dz = this;document.getElementById("upload-btn").addEventListener("click", function handler(e) {dz.processQueue();});',
                     custom_options='autoProcessQueue: false, addRemoveLinks: true, parallelUploads: 20,') }}
</div>

{% endblock %}

{% block scripts %}
{{super()}}
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script>
    // display loading animation
    $('#submit').click(function() {
        $('.mask-bg').show();
        $('.loader').show();
    })
</script>
{% endblock %}